<template>
  <div>


	<myheader></myheader>

	<br /><br />
	<!-- 面包屑导航 -->
	<Breadcrumb :datas='datas'></Breadcrumb>


	<section class="featured-block text-center">
		<div class="container">
			
			<div>用户名 : <input type="text" v-model="username"></div><br />
			<div>密  码 : <input type="password" v-model="password1"></div><br />
			<!-- <div>请输入验证码: <input type="text" v-model="code"><br /> -->
            <!-- <img :src="src" alt=""> -->
			<center>
			<div>
				<dragVerify
				:width='width' 
				:height='height' 
				:text='text' 
				ref='Verify'>


				</dragVerify>
			</div>
			
			</center>
            <!-- </div> -->
			<br />
			<br><br>
			<button @click="submit1">登录</button>
			<img src="http://localhost:8000/static/dingding.png" @click="dingding">
		</div>

	</section>
	<myfooter></myfooter>

	
	

    
  </div>
  
</template>


 
<script>

// 组件包含
import header from './header.vue';
import footer from './footer.vue';

// 导入滑块验证码
import dragVerify from 'vue-drag-verify'



export default {
  data () {
    return {
	  username: '',
	  password1: '',
	  // 面包屑导航数据
	  datas: [
		  {title: '首页', route:{name: 'index'}},
		  {title: '登录页面', route:{name: 'register'}},
		],
		width: 300,
		height: 40,
		text: '请将滑块拖动到右侧'
    }
  },
  mounted:function(){
   
  },
  methods:{
	  // 登录按钮点击事件
	  	submit1:function(){
			let ref = this.$refs.Verify.isPassing;
			if(ref){
				// 判断用户名是否为空
				if(this.useranme == ''){
					this.$Message('用户名不能为空');
					//   alert('用户名不能为空');
					return false;
				}
				// 判断密码是否为空
				if(this.password1 == ''){
					this.$Message('密码不能为空');
					//   alert('密码不能为空');
					return false;
				}
				// 发起请求,将数据传入
				this.axios.get('http://localhost:8000/login/',{params:{
					username:this.username,password:this.password1,
				}}).then((result) =>{
					// 展示返回的的数据
					if(result.data['code'] == 405){
						this.$Message(result.data['message'])
						return false
					}
					this.$Message(result.data.message)
					this.log_data = result.data['username']
					// 存储用户信息
					localStorage.setItem('username', result.data.username)
					localStorage.setItem('uid', result.data.uid)
					//   window.location.href = "http://127.0.0.1:8080";
					// 跳转页面
					this.$router.push('/')
				})

			}else{
				this.$Message('请拖动滑块')
		  }
	  	},
		// 钉钉登录
		dingding(){
			let appid = 'dingoaukgkwqknzjvamdqh';
			let redirect_uri = 'http://localhost:8000/dingding_back/';
			let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri
			window.location.href = url;
		}
  },
  // 生命组件
  components:{
	  'myheader':header,
	  'myfooter':footer,
	  'dragVerify':dragVerify
  }
}


</script>
 
<style>



</style>